<template>
	<view class="shortVideos">
		<view class="title" v-if="flag">
			<view><u-icon name="star-fill" color="#7441f1" :label="title"></u-icon></view>
			<view class="right">
				<view @click="gotoNewOpusList" class="newlyBuilt" v-if="userId == userInfo.id">创建+</view>
				<view @click="gotoTAVideos(userId)" class="moreLook">查看更多</view>
			</view>
		</view>
		<view class="opusList">
			<view class="uni-margin-wrap" v-if="list!=''">
				<view class="opusMap_map" v-for="(item, index) in list.slice(0, 3)" @click="selectOpus(item,index)">
					<view class="opusMap_cover">
						<image :src="item.cover" mode="scaleToFill" />
					</view>
					<view class="opusMap_map_name">
						<view :style="{ color: selectIndex === index ? '#f37462' : '#000' }">{{ item.title }}
						</view>
						<!-- <view v-if="!timeFlag" class="opusMap_map_name_date">{{ item.Updated }}更新</view>
						<view v-else class="opusMap_map_name_date">有n个人已付款</view> -->
					</view>
				</view>
			</view>
			<view class="opusNew" @click="gotoNewOpusList" v-else>
				<view class="icon">
					<u-icon name="plus" bold size="30" color="#c0c0c0"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>
<!-- 
	list:必填		数据
	title:必填		标题
	flag:默认false		是否显示查看更多
	flagClick:默认false		true:跳转作品详情、false:显示当前作品id
	timeFlag:默认false		false:显示更新时间、true:显示付款人数
 -->
<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		props: {
			list: {
				type: Array,
				required: true,
				default: () => [] // 返回一个空数组
			},
			title: {
				type: String,
				default: '' // 字符串的默认值为一个空字符串
			},
			flag: {
				type: Boolean,
				default: false // 字符串的默认值为一个空字符串
			},
			flagClick: {
				type: Boolean,
				default: false // 字符串的默认值为一个空字符串
			},
			timeFlag: {
				type: Boolean,
				default: false
			},
			userId: {
				type: Number,
				required: true,
			}
		},
		data() {
			return {
				selectIndex: '',
			}
		},
		mounted() {

		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			selectOpus(item, index) {
				if (!this.flagClick) {
					this.selectIndex = index
					uni.navigateTo({
						url: "/pages/home/opusDirectory/opusDirectory?id=" + item.id
					})
				}
			},
			gotoTAVideos() {
				uni.navigateTo({
					url: "/pages/home/TAOpusList/TAOpusList?userId="+this.userId
				})
			},
			gotoNewOpusList() {
				uni.navigateTo({
					url: "/pages/home/PersonalData/newOpusList?userId="+this.userId
				})
			}
		}
	}
	// 
</script>

<style lang="scss" scoped>
	.shortVideos {
		width: 100%;
		margin: auto;
		background: #fff;
		border-radius: 20rpx;

		.title {
			width: 90%;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 3;

			.right {
				width: 60%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					width: 60%;
				}
				.newlyBuilt {
					font-size: 25rpx;
				}

				.moreLook {
					font-size: 25rpx;
					color: #3c9cff;
				}
			}

		}

		.shortVideos {
			width: 90%;
			margin: auto;
			background: #fff;
			margin-top: 40rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
			}

		}
	}

	.uni-margin-wrap {
		width: 100%;
		// display: flex;

		.opusMap_map {
			width: 32%;
			/* display: flex;
			flex-direction: column;
			align-items: center; */
			display: inline-flex;
			flex-direction: column;
			align-items: center;

			.opusMap_cover {
				width: 200rpx;
                height: 200rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius:20rpx;
				}
			}

			.opusMap_map_name {
				width: 90%;
				margin: auto;
				font-size: 30rpx;
				display: -webkit-box;
				display: box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				max-height: 3em;
				line-height: 1.5em;
				text-align: center;

				view {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

		}
	}

	.icon {
		width: 32%;
		height: 230rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px #bbbbbb solid;
		border-radius: 20rpx;
	}
</style>